<template>
	<base-popup
		:modelValue="modelValue"
		@close="onClose"
		title-class="bg-gradient-1'"
		class="h-[800px]">
		<template #title>
			<div class="pt-7 text-center text-xl relative bg-gradient-1 rounded-t-[10px] min-h-[125px]">
				<p class="text-white">{{ $t('wallet.title') }}</p>
				<div class="relative mt-[23px] pb-[10px] flex justify-center items-center">
					<base-switch-tabs
						:modelValue="tab"
						@update:modelValue="handleTab"
						:data="TAB_LIST"
						translation
						activeTextBold />

					<base-icon
						name="order"
						@click="walletStore.setPaymentHistoryShow(true)"
						class="text-white absolute cursor-pointer top-0 bottom-0 right-4 my-auto text-xl" />
				</div>
			</div>
		</template>

		<div class="bg-bg-3 flex-1 flex flex-col h-full">
			<div style="flex: 0 1 15%"></div>
			<div class="text-center bg-bg-1">
				<div class="text-t-2 pt-[10px] text-sm">{{ $t('wallet.balance') }}</div>
				<div class="text-3xl py-[17px] flex justify-center">
					<sub>
						<base-currency :currency="currency" smallSize />
					</sub>
					<base-number-animation :to="balance" />
				</div>
			</div>

			<div class="relative">
				<div class="w-[430px] h-[1px] mx-[35px] bg-bg-3 absolute" />
			</div>

			<div class="loading flex justify-center pt-20" v-if="showLoading">
				<base-loading />
			</div>
			<template v-else>
				<template v-if="tab === WalletAction.recharge.id">
					<wallet-deposit v-if="dataList.length" />
					<wallet-empty v-else />
				</template>
				<template v-if="tab === WalletAction.withdraw.id">
					<wallet-withdraw v-if="hasWithdraw" />
					<wallet-empty v-else />
				</template>
			</template>
		</div>
	</base-popup>
	<wallet-recharge-popup />
	<wallet-result />
	<wallet-transaction />
	<validate-withdraw />
</template>

<script lang="ts" setup>
import { computed, nextTick, onMounted, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { DEPOSIT_TAB, WALLET_TAB } from '@/constants'
import { useAppStore, useProfileStore, useWalletStore } from '@/store'
import { getItem, setItem } from '@/utils'
import WalletRechargePopup from '@/views/wallet/deposit/index.vue'
import WalletWithdraw from './wallet-withdraw.vue'
import WalletEmpty from '@/views/wallet/components/wallet-empty.vue'
import ValidateWithdraw from '@/views/wallet/validate/validate-withdraw.vue'
import {
	BasePopup,
	BaseLoading,
	BaseCurrency,
	BaseIcon,
	BaseSwitchTabs,
	BaseNumberAnimation,
	SwitchTabsType
} from '@/components/base'
import WalletResult from '@/views/wallet/result/index.vue'
import WalletTransaction from '@/views/wallet/transaction/index.vue'
import WalletDeposit from '@/views/wallet/wallet/wallet-deposit.vue'
import { WalletAction } from '@/types'

defineOptions({ name: 'ViewsWalletWallet' })

const TAB_LIST: SwitchTabsType = [
	{
		id: 1,
		name: 'wallet.deposit',
		icon: 'recharge1'
	},
	{
		id: 2,
		name: 'wallet.withdraw',
		icon: 'withdraw'
	}
]

const route = useRoute()
const walletStore = useWalletStore()
const profileStore = useProfileStore()
const appStore = useAppStore()
const tab = ref(getItem(WALLET_TAB) || 1)
const modelValue = computed(() => walletStore.isShowWalletPopup)

watch(tab, () => {
	setItem(WALLET_TAB, tab.value)
	setItem(DEPOSIT_TAB, Number(tab.value) === 1 ? 'Deposit' : 'Withdraw')
})

const dataList = computed(() => walletStore.channelInfo.channelList)
const isFlat = computed(() => walletStore.withdrawChannel.flat)
const isCrypto = computed(() => walletStore.withdrawChannel.crypto && walletStore.dw)
const hasWithdraw = computed(() => isFlat.value || isCrypto.value)

function handleTab(data: any) {
	// 如果当前data的值为提款状态但是没有验证通过 提示验证
	if (data === WalletAction.withdraw.id && !appStore.allowable) {
		// showWithdrawValidate.value = true
		walletStore.setWithdrawValidateShow(true)
		setItem(WALLET_TAB, 1)
		setItem(DEPOSIT_TAB, 'Deposit')
	} else {
		tab.value = data
		setItem(WALLET_TAB, data)
	}
}

const showLoading = ref(true)
const routeQueryType = computed(() => Number(route.query.type))
onMounted(async () => {
	const initTab = Number(routeQueryType.value || getItem(WALLET_TAB) || WalletAction.recharge.id)
	handleTab(initTab)
	// if (!dataList.value.length) {
	// 	console.log('initTab!!!!!!!!!!')
	// 	await walletStore.getChannelInfo()
	// }
	// await walletStore.getChannelInfo()
	// await walletStore.getWithdrawChannel()
	showLoading.value = false
	await nextTick(() => {
		numberAnimate.value = true
	})
})

const currency = computed(() => appStore.currency)
const numberAnimate = ref(false)
const balance = computed(() => walletStore.balance)
watch(balance, () => {
	numberAnimate.value = true
})
const onClose = () => {
	walletStore.setWalletDepositShow(false)
}

watch(
	() => walletStore.isShowWalletPopup,
	() => {
		console.log(walletStore.isShowWalletPopup)
		tab.value = getItem(WALLET_TAB)
	}
)
watch(
	() => walletStore.showValidate,
	(newValue) => {
		if (!newValue) {
			tab.value = 1
		}
	}
)

watch(
	() => walletStore.showWithdrawValidate,
	async (newValue) => {
		if (!newValue) {
			if (appStore.allowable) {
				tab.value = 2
				// await walletStore.getWithdrawChannel()
				await profileStore.getUserInfo()
			}
		}
	}
)
</script>

<style lang="scss" scoped></style>
